<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="">
</head>
<body>
<div>
    <table id="tab">

    </table>
</div>


<script th:src="@{${'/js/mustache.js'}}" src="/js/mustache.js" type="text/javascript"></script>
<script th:src="@{${'/js/vue.js'}}" src="/js/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script id="myTemplate" type="x-tmpl-mustache">
    <tr>
        <td>{{id}}</td>
        <td>{{name}}</td>
        <td>{{pid}}</td>
    </tr>
</script>
<script>
    axios.get('/dept/get')
        .then(function (response) {
            console.log(response);
            render(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });

    function render(result) {
        var tab = "";     //模板拼接
        var template = document.getElementById("myTemplate").innerHTML;
        for (var i in result){
            tab+=Mustache.render(template, result[i]);
        }
        document.getElementById("tab").innerHTML=(tab);

    }
</script>
</body>
</html>